<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <link rel="stylesheet" href="../res/static/css/mian.css">
    <link rel="stylesheet" href="../res/static/css/edit.css">

</head>
<body class="lay-blog" style="display: none">

<#include "../common/header.ftl">
<div class="container-wrap">
    <div class="container container-message container-details">
        <div class="contar-wrap" >
            <div class="item" >
            </div>
            <a name="comment"> </a>
            <div class="comt layui-clear">
                <a href="javascript:;" class="pull-left">评论</a>
                <a href="comment.ftl" class="pull-right">写评论</a>
            </div>
            <div id="LAY-msg-box">
                <div class="info-item">
                    <img class="info-img" src="../res/static/images/info-img.png" alt="">
                    <div class="info-text">
                        <p class="title count">
                            <span class="name">一片空白</span>
                            <span class="info-img like"><i class="layui-icon layui-icon-praise"></i>5.8万</span>
                        </p>
                        <p class="info-intr">
                            父爱如山，不善表达。回想十多年前，总记得父亲有个宽厚的肩膀，小小的自己跨坐在上面，越过人山人海去看更广阔的天空，那个时候期望自己有一双翅膀，能够像鸟儿一样飞得高，看得远。虽然父亲有时会和自己开玩笑，但在做错事的时候会受到严厉的训斥。父亲有双粗糙的大手掌。</p>
                    </div>
                </div>
                <div class="info-item">
                    <img class="info-img" src="../res/static/images/info-img.png" alt="">
                    <div class="info-text">
                        <p class="title count">
                            <span class="name">一片空白</span>
                            <span class="info-img like"><i class="layui-icon layui-icon-praise"></i>5.8万</span>
                        </p>
                        <p class="info-intr">
                            父爱如山，不善表达。回想十多年前，总记得父亲有个宽厚的肩膀，小小的自己跨坐在上面，越过人山人海去看更广阔的天空，那个时候期望自己有一双翅膀，能够像鸟儿一样飞得高，看得远。虽然父亲有时会和自己开玩笑，但在做错事的时候会受到严厉的训斥。父亲有双粗糙的大手掌。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p>
        <span>&copy; 2018</span>
        <span><a href="http://www.layui.com" target="_blank">layui.com</a></span>
        <span>MIT license</span>
    </p>
    <p><span>人生就是一场修行</span></p>
</div>
<script src="../res/layui/layui.js"></script>
<script  src="../res/static/js/basePath.js"></script>
<script>
    layui.use(['form', 'jquery', 'layer', 'laytpl'], function () {
        var form = layui.form
                , layer = layui.layer
                , laytpl = layui.laytpl
                , $ = layui.jquery;


        var ajaxMethd = (function () {

            function init(id) {
                var data = null;
                var parameter = {
                    type: "get",
                    url: webPath + "/api/article/find",
                    async: false,
                    data: {'id': id},
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            data = res.data;
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
                return data;
            }
            function navInit( ) {
                var data = null;
                var parameter = {
                    type: "get",
                    url: webPath + "/res/json/navitems.json",
                    async: false,
                    data: {},
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            data = res.data;
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
                return data;
            }

            return {
                init: init
                ,navInit:navInit
            }
        })();
        var domMethd = (function () {
            //文章
            function ariaceInit(data) {
                var html = laytpl(LAY_tpl.value).render(data);
                $('body > div.container-wrap > div > div > div.item').append(html)
            }

            //.attr('style', 'display:block');
            function  showHtml() {
                $('body').attr('style', 'display:block');
            }

            //菜单
            function menuInit(data) {
                var webHtml = "", phoneHtml = "";
               console.log(data)
                for (var index in data) {
                    var item = data[index];
                    webHtml += '<li class="layui-nav-item"><a href="' + item.url + '">' + item.title + '</a></li>';
                    phoneHtml += '<li><a href="' + item.url + '">' + item.title + '</a></li>';
                }
                $('body > div.header > div > div.blog-nav.pull-right > ul').html(webHtml);//web
                $('#pop-nav').html(phoneHtml)//手机
            }

            return {
                ariaceInit: ariaceInit
                ,showHtml:showHtml
                ,menuInit:menuInit
            }
        })();

        var data = ajaxMethd.init(${id});
        domMethd.ariaceInit(data);
        //var data = ajaxMethd.navInit()
        //domMethd.menuInit(data);
        domMethd.showHtml();
    });
</script>
<script>
    layui.config({
        base: '../res/static/js/'
    }).use('blog');
</script>
</body>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{#   var item = d; }}
<div class="item-box  layer-photos-demo1 layer-photos-demo">
<h3><a href="${webPath}/page/details?id={{item.articleId}}">{{ item.articleName }}</a></h3>
<h5>发布于：<span>{{ item.updateDate }}</span></h5>
<p>
    {{item.articleHtml}}
<#--内容-->
</p>
<div class="count layui-clear">
<span class="pull-left">阅读 <em>100000+</em></span>
<span class="pull-right like"><i class="layui-icon layui-icon-praise"></i><em>999</em></span>
</div>
</div>
{{#   }}
</textarea>
</html>